<template>
    <AntdShowModal :title="`【${user.userName}-${user.nickName}】角色管理`" :width="900" ref="modalRef">
        <a-row :gutter="20">
            <a-col :span="6">
                <DeptTree @confirm="deptConfirm"></DeptTree>
            </a-col>
            <a-col :span="18">
                <a-row>
                    <a-input-search allow-clear v-model:value="queryParams.searchKey" placeholder="角色标识/名称"
                        style="width: 200px; margin-bottom: 10px; margin-right: 50px;" @search="handleQuery()" />
                    <a-button style="margin-bottom: 10px; left:30px; width: 80px;" @click="resetQuery()">
                        <template #icon>
                            <SyncOutlined />
                        </template>重置
                    </a-button>
                </a-row>
                <AntdZh>
                    <a-table :columns="columns" :data-source="tableData" :loading="loading" :pagination="pagination"
                        @change="handleTableChange">
                        <template #bodyCell="{ column, record, index }">

                            <template v-if="column.dataIndex === 'dept'">
                                <view v-if="deptStore.deptMap">
                                    {{ deptStore.getDeptName(record.deptId) || null }}
                                </view>

                            </template>
                            <template v-else-if="column.dataIndex === 'status'">
                                <!--执行状态-->
                                <a-tag color="green" v-if="record.status">启用</a-tag>
                                <a-tag color="red" v-else>停用</a-tag>

                            </template>
                            <template v-else-if="column.dataIndex == 'action'">
                                <a-button type="danger" @click="doCancel(record.id)"
                                    v-if="hasRole(record.roleKey)">取消授权</a-button>
                                <a-button type="primary" @click="doGrant(record.id)" v-else>授权</a-button>
                            </template>
                        </template>
                    </a-table>
                </AntdZh>
            </a-col>
        </a-row>
    </AntdShowModal>
</template>
<script setup>
import {columns} from './index';
import Validator from '@/utils/Validator';
import DeptTree from '@/module/org/components/DeptTree';
import { SyncOutlined } from '@ant-design/icons-vue';
import { queryList } from '@/module/org/api/role';
import { queryRoles } from '@/module/org/api/user';
import { createOne, cancelOne } from '@/module/org/api/grant';
import useApp from '@/hooks'
const { $ } = useApp()
import useDeptStore from '@/module/org/store/dept';
const deptStore = useDeptStore();
const modalRef = ref(null)
const userId = ref(null)
const user = ref({})
const queryParams = ref({
    deptId: undefined,
    pageNum: 1,
    pageSize: 10,
    status: 1
})
const pagination = computed(() => ({
    total: total.value,
    current: queryParams.pageNum,
    pageSize: queryParams.pageSize,
}));
const tableData = ref([])
const loading = ref(false)
const total = ref(0)
const roleKeys = ref([])

function handleTableChange(page, filters, sorted) {


    queryParams.value.pageSize = page.pageSize;
    queryParams.value.pageNum = page.current;

    // 状态
    var status = filters.status;
    if ($.isNotEmpty(status)) {
        queryParams.value.status = status[0];
    } else {
        queryParams.value.status = null
    }
    handleQuery();

}
// 计算函数
function hasRole(roleKey) {
    return roleKeys.value.includes(roleKey)
}
//
function doCancel(roleId) {
    cancelOne({
        roleId: roleId,
        userId: userId.value
    }).then(res => {
        $.showToast({
            title: '取消成功',
            icon: 'success'
        })
        getRoles()

    })
}
// 授权
function doGrant(roleId) {
    createOne({
        roleId,
        userId: userId.value
    }).then(res => {
        $.showToast({
            title: '授权成功',
            icon: 'success'
        })
        getRoles()

    })
}
// 获取用户角色列表
function getRoles() {
    queryRoles(userId.value).then(res => {
        let arr = res;
        roleKeys.value = arr.map(ele => {
            return ele.roleKey
        })
        console.log(roleKeys.value)
    })
}
// 参数重置
function resetQuery() {
    queryParams.value = {
        pageSize: 10,
        pageNum: 1
    }
    handleQuery();
}
// 查询
function handleQuery() {
    loading.value = true;
    queryList(queryParams.value).then(response => {
        tableData.value = response.content;
        total.value = response.totalElements;
        loading.value = false;
    })
}
// 部门确认
function deptConfirm(e) {
    queryParams.value.deptId = e
    queryParams.value.pageNum = 1
    handleQuery()
}
$.on('user-role-grant', data => {
    resetQuery();
    user.value = data;
    userId.value = data.id;
    // 初始化执行
    handleQuery()
    getRoles()
    modalRef.value.openModal();
})

</script>